import React, { Component } from 'react'

class Index extends Component {
  state = {
    count: 0,
  }

  increment = () => {
    const { value } = this.selectValue
    const { count } = this.state
    this.setState({
      count: +count + +value,
    })
  }
  decrement = () => {
    const { value } = this.selectValue
    const { count } = this.state
    this.setState({
      count: +count - +value,
    })
  }
  incrementIfOdd = () => {
    const { value } = this.selectValue
    const { count } = this.state
    if (count % 2 === 1) {
      this.setState({
        count: +count + +value,
      })
    }
  }
  incrementAsync = () => {
    const { value } = this.selectValue
    const { count } = this.state
    setTimeout(() => {
      this.setState({
        count: +count + +value,
      })
    }, 500)
  }

  render() {
    return (
      <div>
        <p>当前求和为：{this.state.count}</p>
        <select ref={(val) => (this.selectValue = val)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        &nbsp;&nbsp;
        <button onClick={this.increment}>加</button>&nbsp;&nbsp;
        <button onClick={this.decrement}>减</button>&nbsp;&nbsp;
        <button onClick={this.incrementIfOdd}>奇数加</button>&nbsp;&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>
      </div>
    )
  }
}

export default Index
